<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>全选</title>
	</head>

	<body>

		<!--
			《1》配套第二个视频，讲解getElementsByName("***")的使用
			完成全选操作
			《2》
			
		-->
		<input type="checkbox" name="aihao" id="aihao1" value="1" />1
		<input type="checkbox" name="aihao" id="aihao2" value="2" />2
		<input type="checkbox" name="aihao" id="aihao3" value="3" />3
		<input type="checkbox" name="aihao" id="aihao4" value="4" />4
		<input type="checkbox" name="aihao" id="aihao5" value="5" />5
		<input type="checkbox" name="aihao" id="aihao6" value="6" />6

		<br />
		<input type="button" id="buta" value="全选" onclick="allin()" />
		<input type="button"  id="butb" value="反选"  onclick="resin()"/>
		<input type="button"  id="butc" value="全不选" onclick="allnotin()"/>
		
		<script type="text/javascript">
			function allin() {
//				alert("是否进入函数中");
				var names = document.getElementsByName("aihao");
				console.log(names.length);
				for(var i = 0; i < names.length; i++) {
					// 控制台输出每个值
					console.log(names[i].value);
					// 设置每个元素选中  
					names[i].checked = true;
					// 使用setAttribute（）设置属性，第一个参数为属性名，第二个参数为属性值
					//这种方法只能全选一次
//					 names[i].setAttribute("checked","checked");
				}
			}
			
			function allnotin(){
//				alert("in function");
				var names = document.getElementsByName("aihao");
				console.log(names.length);
				for(var i=0;i<names.length;i++){
					console.log(names[i].value);
					names[i].checked = false;
				}
			}
			
			function resin(){
//				alert("in function");
				var names = document.getElementsByName("aihao");
				console.log(names.length);
				for(var i=0;i<names.length;i++){
					console.log(names[i].value);
					//方法1：条件表达式形式
					names[i].checked = names[i].checked==true?false:true;
					//方法2：if-else形式
//					if(names[i].checked == true){
//						names[i].checked=false;
//					}else{
//						names[i].checked=true;
//					}
				}
			}
		</script>
	</body>

</html>